<template>
  <div class="course-page">
    <!-- 课程头部信息 -->
    <div class="course-header">
      <div class="course-info">
        <el-icon :size="32" :color="course.iconColor">
          <component :is="course.icon" />
        </el-icon>
        <div class="info-text">
          <h1>{{ course.name }}</h1>
          <div class="meta">
            <span>总章节：{{ course.totalChapters }}</span>
            <span>已学习：{{ course.completedChapters }}</span>
            <el-progress :percentage="course.progress" :format="format" />
          </div>
        </div>
      </div>
      <div class="actions">
        <el-button type="primary" @click="startLearning">继续学习</el-button>
        <el-button @click="openExam">课程测试</el-button>
      </div>
    </div>

    <!-- 主要内容区域 -->
    <el-row :gutter="20">
      <!-- 左侧章节列表 -->
      <el-col :span="16">
        <div class="section-container">
          <h2>课程大纲</h2>
          <el-collapse v-model="activeChapters">
            <el-collapse-item 
              v-for="chapter in course.chapters" 
              :key="chapter.id"
              :title="chapter.title"
              :name="chapter.id"
            >
              <div class="chapter-content">
                <div 
                  v-for="point in chapter.points" 
                  :key="point.id"
                  class="knowledge-point"
                  :class="{ completed: point.completed }"
                  @click="navigateToPoint(point.id)"
                >
                  <div class="point-info">
                    <el-icon>
                      <component :is="point.completed ? 'Check' : 'Reading'" />
                    </el-icon>
                    <span>{{ point.title }}</span>
                  </div>
                  <div class="point-meta">
                    <el-tag size="small" :type="point.difficultyType">
                      {{ point.difficulty }}
                    </el-tag>
                    <span class="estimated-time">预计用时：{{ point.estimatedTime }}</span>
                  </div>
                </div>
              </div>
            </el-collapse-item>
          </el-collapse>
        </div>
      </el-col>

      <!-- 右侧学习状态 -->
      <el-col :span="8">
        <!-- 学习进度卡片 -->
        <el-card class="progress-card">
          <template #header>
            <h3>学习进度</h3>
          </template>
          <el-row :gutter="20">
            <el-col :span="12">
              <div class="stat-item">
                <div class="stat-value">{{ course.completedPoints }}</div>
                <div class="stat-label">已学知识点</div>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="stat-item">
                <div class="stat-value">{{ course.totalPoints }}</div>
                <div class="stat-label">总知识点</div>
              </div>
            </el-col>
          </el-row>
          <el-row :gutter="20" class="stat-row">
            <el-col :span="12">
              <div class="stat-item">
                <div class="stat-value">{{ course.completedExercises }}</div>
                <div class="stat-label">已做习题</div>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="stat-item">
                <div class="stat-value">{{ course.correctRate }}%</div>
                <div class="stat-label">正确率</div>
              </div>
            </el-col>
          </el-row>
        </el-card>

        <!-- 最近学习记录 -->
        <el-card class="history-card">
          <template #header>
            <h3>最近学习</h3>
          </template>
          <el-timeline>
            <el-timeline-item
              v-for="record in course.learningHistory"
              :key="record.id"
              :timestamp="record.time"
              :type="record.type"
            >
              {{ record.content }}
            </el-timeline-item>
          </el-timeline>
        </el-card>

        <!-- 推荐练习 -->
        <el-card class="exercises-card">
          <template #header>
            <div class="card-header">
              <h3>推荐练习</h3>
              <el-button type="primary" text>查看全部</el-button>
            </div>
          </template>
          <div 
            v-for="exercise in course.recommendedExercises"
            :key="exercise.id"
            class="exercise-item"
            @click="startExercise(exercise.id)"
          >
            <div class="exercise-info">
              <h4>{{ exercise.title }}</h4>
              <el-tag size="small" :type="exercise.difficultyType">
                {{ exercise.difficulty }}
              </el-tag>
            </div>
            <p class="exercise-desc">{{ exercise.description }}</p>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()
const activeChapters = ref(['1'])

// 示例数据
const course = ref({
  id: 1,
  name: '计算机网络',
  icon: 'Monitor',
  iconColor: '#67C23A',
  progress: 45,
  totalChapters: 9,
  completedChapters: 4,
  completedPoints: 24,
  totalPoints: 56,
  completedExercises: 68,
  correctRate: 85,
  chapters: [
    {
      id: '1',
      title: '第1章 计算机网络概述',
      points: [
        {
          id: 1,
          title: '计算机网络的定义与分类',
          completed: true,
          difficulty: '简单',
          difficultyType: 'success',
          estimatedTime: '30分钟'
        },
        {
          id: 2,
          title: '计算机网络的性能指标',
          completed: true,
          difficulty: '中等',
          difficultyType: 'warning',
          estimatedTime: '45分钟'
        }
      ]
    },
    {
      id: '2',
      title: '第2章 物理层',
      points: [
        {
          id: 3,
          title: '数据通信基础',
          completed: false,
          difficulty: '中等',
          difficultyType: 'warning',
          estimatedTime: '60分钟'
        }
      ]
    }
  ],
  learningHistory: [
    {
      id: 1,
      content: '完成"TCP三次握手"知识点学习',
      time: '2024-01-20 14:30',
      type: 'success'
    },
    {
      id: 2,
      content: '完成第3章测试题',
      time: '2024-01-20 11:20',
      type: 'primary'
    }
  ],
  recommendedExercises: [
    {
      id: 1,
      title: 'TCP流量控制机制',
      difficulty: '中等',
      difficultyType: 'warning',
      description: '根据你的学习进度推荐，这道题目可以帮助你更好地理解TCP的流量控制原理'
    },
    {
      id: 2,
      title: 'IP地址分类',
      difficulty: '简单',
      difficultyType: 'success',
      description: '这是一道基础题目，建议在学习新知识点之前先复习一下'
    }
  ]
})

const format = (percentage) => {
  return `${percentage}%`
}

const startLearning = () => {
  // 跳转到最近的未完成知识点
  router.push(`/point/3`)
}

const openExam = () => {
  router.push(`/exam/${course.value.id}`)
}

const navigateToPoint = (pointId) => {
  router.push(`/point/${pointId}`)
}

const startExercise = (exerciseId) => {
  router.push(`/exercise/${exerciseId}`)
}
</script>

<style scoped>
.course-page {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.course-header {
  background: white;
  padding: 24px;
  border-radius: 8px;
  margin-bottom: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.course-info {
  display: flex;
  align-items: center;
  gap: 20px;
}

.info-text h1 {
  margin: 0 0 8px 0;
  color: var(--text-primary);
}

.meta {
  display: flex;
  align-items: center;
  gap: 16px;
  color: var(--text-regular);
}

.meta :deep(.el-progress) {
  width: 150px;
  margin-left: 16px;
}

.actions {
  display: flex;
  gap: 12px;
}

.section-container {
  background: white;
  padding: 20px;
  border-radius: 8px;
}

.chapter-content {
  padding: 8px 0;
}

.knowledge-point {
  padding: 12px 16px;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.2s;
  margin-bottom: 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.knowledge-point:hover {
  background-color: #f5f7fa;
}

.knowledge-point.completed {
  background-color: #f0f9eb;
}

.point-info {
  display: flex;
  align-items: center;
  gap: 8px;
}

.point-meta {
  display: flex;
  align-items: center;
  gap: 12px;
}

.estimated-time {
  color: var(--text-secondary);
  font-size: 14px;
}

.progress-card, .history-card, .exercises-card {
  margin-bottom: 20px;
}

.stat-row {
  margin-top: 20px;
}

.stat-item {
  text-align: center;
}

.stat-value {
  font-size: 24px;
  font-weight: bold;
  color: var(--primary-color);
}

.stat-label {
  color: var(--text-secondary);
  font-size: 14px;
  margin-top: 4px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.exercise-item {
  padding: 12px;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.2s;
  margin-bottom: 12px;
}

.exercise-item:hover {
  background-color: #f5f7fa;
}

.exercise-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.exercise-info h4 {
  margin: 0;
}

.exercise-desc {
  color: var(--text-secondary);
  font-size: 14px;
  margin: 0;
}
</style>